<template>
    <nly-content-wrapper class="content-warpper-2">
        <div class="content-header-2" >
        
        </div>
        <nly-content>
            <a-tabs  v-model="activeKey" @change="onTabChange" class="tab-class">
                <a-tab-pane :key="1" tab="使用">
                    <a-descriptions title="" layout="vertical" bordered :column="{ xxl: 6, xl: 6, lg: 6, md: 5, sm: 4, xs: 3 }">
                        <a-descriptions-item label="年份">
                            {{callMinutes.year}}
                        </a-descriptions-item>
                        <a-descriptions-item label="月份">
                            {{callMinutes.month}}
                        </a-descriptions-item>
                        <a-descriptions-item label="合计套餐分钟数">
                            {{callMinutes.baseMinutesTotal}}
                        </a-descriptions-item>
                        <a-descriptions-item label="剩余套餐分钟数">
                            <div style="color: #F59A23;font-weight: 700;height:50px;line-height:50px;">{{callMinutes.baseMinutesRemain}}</div>
                        </a-descriptions-item>
                        <a-descriptions-item label="合计通用分钟数">
                            {{callMinutes.generalMinutesTotal}}
                        </a-descriptions-item>
                        <a-descriptions-item label="剩余通用分钟数">
                            <span style="color: #F59A23;font-weight: 700;">{{callMinutes.generalMinutesRemain}}</span>
                        </a-descriptions-item>
                    </a-descriptions>

                     <!-- 列表 -->
                    <a-table :columns="columns" :data-source="data" bordered :scroll="{ x: 1000, y: 500}" :pagination="false" :loading="false" class="mt-4">
                        <div slot="operation" slot-scope="text, record" >
                            <sapn class="opration-span" @click="renewal(record)">续费</sapn>
                            <sapn v-if="record.renewalType == 2 && record.isSetting" class="opration-span ml-2" @click="changeRenewalType(record.id,1)">设置为手动续费</sapn>
                            <sapn v-if="record.renewalType == 1 && record.isSetting" class="opration-span ml-2" @click="changeRenewalType(record.id,2)">设置为自动续费</sapn>
                        </div>
                    </a-table>
                </a-tab-pane>
                <a-tab-pane :key="2" tab="话费市场">
                    <!-- 话费市场 -->
                    <tel-goods-select-modal ref="telBuyGoodsModal" @callBack="saveOrderConfirm"></tel-goods-select-modal>
                </a-tab-pane>
                <a-tab-pane :key="3" tab="话费记录">
                    <call-minutes-record ref="callMinutesRecord"></call-minutes-record>
                </a-tab-pane>   
            </a-tabs>
        </nly-content>  
        <!-- 缴纳保证金 -->
        <add-deposit-modal ref="addDepositModal"></add-deposit-modal>
    </nly-content-wrapper>
</template>

<script>
import { mapState } from "vuex";
import { getByCompany,changeRenewalType} from "@/api/crm/call/callMinutes";
import {saveOrder } from "@/api/member/order";

import TelGoodsSelectModal from "@/views/call/modal/TelGoodsSelectModal";
import CallMinutesRecord from "@/views/call/CallMinutesRecord";
import AddDepositModal from "@/views/call/modal/AddDepositModal";

export default {
    components:{
        TelGoodsSelectModal,
        CallMinutesRecord,
        AddDepositModal
    },
    data () {
        const columns = [
            {
                align: "left",
                title: "商品",
                dataIndex: "crmGoodsName",
                width: 80,
            },
             {
                align: "left",
                title: "话费类型",
                dataIndex: "isSetting",
                width: 80,
                customRender: (text, row, index) => {
                    let showText = "套餐";
                    if(!text){
                        return showText = "时长包";
                    }
                    return showText;
                },
            },
             {
                align: "center",
                title: "时长(分钟)",
                dataIndex: "baseMinutes",
                width: 80,
            },
            {
                align: "center",
                title: "单价(元)",
                dataIndex: "price",
                width: 80,
            },
            {
                align: "center",
                title: "数量",
                dataIndex: "number",
                width: 80,
            },
            {
                align: "center",
                title: "总金额(元)",
                dataIndex: "totalAmount",
                width: 100,
            },
            {
                align: "center",
                title: "总时长(分钟)",
                dataIndex: "totalMinutes",
                width: 100,
            },
             {
                align: "left",
                title: "生效时间",
                dataIndex: "startTime",
                width: 100,
            },
            {
                align: "left",
                title: "失效时间",
                dataIndex: "endTime",
                width: 100,
            },
            {
                align: "center",
                title: "续费方式",
                dataIndex: "renewalType",
                width: 100,
                 customRender: (text, row, index) => {
                    if(!row.isSetting)return "";
                    let showText = "套餐";
                    switch(text){
                       case 1:   showText = <span style="color:red;">手动</span>;break;  
                       case 2:   showText = <span style="color:green;">自动</span>;break;
                    }
                    return showText;
                },
            },
             {
                align: "center",
                title: "操作",
                dataIndex: "operation",
                width: 100,
                scopedSlots: { customRender: 'operation' },
            },
        ];
        return {
            activeKey:1,
            callMinutes:{},
            numberReg: /^[1-9]{1}[0-9]*$/,
            floatReg: /^-?[0-9]*(\.[0-9]*)?$/,
            data: [],
            columns,
        };
    },
    created(){
    },
    mounted(){
    },
    activated(){
        this.reLoadData();
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
    },
    watch: {
    },
    methods: {
        onTabChange(activeKey){
            switch(activeKey){
                case 1: this.reLoadData();break;
                case 2: this.$refs.telBuyGoodsModal && this.$refs.telBuyGoodsModal.reLoadData();break;
                case 3: this.$refs.callMinutesRecord && this.$refs.callMinutesRecord.reLoadData();break;
            }
        },
        reLoadData(){
            this.getByCompany();
        },
        //获取当前账单
        getByCompany () {
            getByCompany().then(response => {
                if (response.code === 200) {
                    const { data } = response;
                    if(data){
                        this.callMinutes = data;
                        this.data = data.crmCallMinutesDetailList;
                    }
                }
            }).catch(error => { });
        },
        //购买套餐确认
        saveOrderConfirm(item){
            
            let _this = this;
              this.$confirm({
                title: '订单确认',
                content: <span>您确定要{<span style='color:red;'>购买</span>}话费{<span style='color:red;'>{item.goodsName}</span>}吗？</span>,
                onOk () {
                   _this.saveOrder(item);
                },
                onCancel () { },
            });
        },
        //购买套餐
        saveOrder(item){
            item.createDate = null;
            item.goodsId = item.id;
            item.orderType = 1;
            item.orderBusinessType = "Goods";
            delete item.id;
            saveOrder(item).then(response => {
                if (response.code == 200) {
                    this.$message.success("购买成功");
                    this.$refs.telBuyGoodsModal.onModalClose();
                    this.reLoadData();
                    this.activeKey = 1;
                }else if(response.code == 6001){
                     this.$refs.addDepositModal.onModalOpen({});
                }
            });
        },
        /** 续费 */
        renewal(record){
            console.log("续费参数：",record);
            let message = <span>您将购买一次<span style="color:red;">{record.crmGoodsName}</span>，是否继续?</span>;
            let {crmGoodsId} = record;
            let postData = {
                goodsId:crmGoodsId,
                orderType: 3,
                orderBusinessType:"Goods",
            };
            let _this = this;
            this.$confirm({
                title: '续费',
                content: message,
                onOk () {
                    saveOrder(postData).then(response => {
                        if (response.code == 200) {
                            _this.$message.success("续费成功");
                            _this.reLoadData();
                         
                        }
                    });
                },
                onCancel () { },
            });
        },
         //更改 续费方式
        changeRenewalType(id,renewalType){
            let message = <span>您确定更改为<span style="color:red;">自动续费</span>方式?资源到期后将按续费周期自动续费，请您确保资源到期时账户余额充足!</span>;
            if(renewalType == 1){
                message = <span>您确定更改为<span style="color:red;">手动续费</span>方式?</span>;
            }
            let _this = this;
            this.$confirm({
                title: '提示',
                content: message,
                onOk () {
                    changeRenewalType({id,renewalType}).then(response => {
                        if (response.code == 200) {
                            _this.$message.success("更改成功");
                            _this.reLoadData();
                        }
                    });
                },
                onCancel () { },
            });
        },

    }
};
</script>
<style lang="less" scoped>
    .opration-span{
        font-size: 12px;
        color: #0D88FF;
        margin-bottom: 0px;
        cursor:pointer;
    }
    /deep/.ant-descriptions-item-label {
    background-color: #dbdbdb !important;
    }
    .border-t-95{
        border-top: 1px solid #e8e8e8; 
    }
    .detail-box{
        border: 1px solid #e8e8e8;
        background: #fff;
        border-radius: 2px;
        position: relative;
        box-sizing: border-box;
        color: rgba(0,0,0,.65);
        line-height: 1.5;
        font-size: 14px;
        margin-top:-5px;
        margin: 0px 10% 10px 10%;
        .detail-header{
            padding: 14.5px 24px;
            // background: #f2f3f5;
            border-bottom: 1px solid #e8e8e8;
            color: rgba(0,0,0,.85);
            min-height: 40px;
            font-size: 16px;
            font-weight: 500;
            border-radius: 2px 2px 0 0;
        }
        .detail-content{
            padding: 8px 24px 3px 24px;
            .detail-item{
                margin-bottom: 5px;
                .detail-title{
                    display: inline-block;
                    width: 120px;
                    margin-right: 8px;
                    color: #7b7979;
                }
                .detail-text{
                    color: #333 !important;
                }
            }
        }
    }
    // 头部
    .header{
        margin: 5px 20px;
        .bt{
            margin-left: 10px;
        }
    }
</style>